/*
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-07 14:24:09
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-11 12:27:52
 * @FilePath: \test\src\hooks\useMapbox.js
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { ref, onMounted, onUnmounted, reactive } from "vue";
// dayjs
import dayjs from "dayjs";
import mapboxgl from "mapbox-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
//天地图
var vecUrl =
  "http://t0.tianditu.com/vec_w/wmts?tk=738bf5750c6bdab551c6ab49a7e4864e";
var cvaUrl =
  "http://t0.tianditu.com/cva_w/wmts?tk=738bf5750c6bdab551c6ab49a7e4864e";
//使用严格模式
var tdtVec = {
  type: "raster",
  tiles: [
    vecUrl +
      "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
  ],
  //分辨率
  tileSize: 256,
};
var tdtCva = {
  type: "raster",
  tiles: [
    cvaUrl +
      "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
  ],
  tileSize: 256,
};

export function useMapbox(props) {
  console.log(props, "props");
  let { domId } = props;
  // 地图实例
  let map = ref(null);
  let draw = reactive(null);

  // 初始化地图
  function initMap() {
    mapboxgl.accessToken =
      "pk.eyJ1IjoiZ2FvMTU5MzAyNjgxNCIsImEiOiJja3dsdG9nb3kyNWh3MnhuczVtYjNwbmw0In0.KnC5HdFQZH6ydiuwsrulmg";
    let map1 = new mapboxgl.Map({
      container: domId, // container id
      style: "mapbox://styles/gao1593026814/cl4p6aqu7000516o3u13pxqbg", //hosted style id
      // style: "mapbox://styles/gao1593026814/clqkj0z8c009l01r8bpni7adk", //hosted style id
      // style: {
      //   //设置版本号，一定要设置
      //   version: 8,
      //   "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
      //   //添加来源
      //   sources: {
      //     tdtVec: tdtVec,
      //     tdtCva: tdtCva,
      //   },
      //   layers: [
      //     {
      //       //图层id，要保证唯一性
      //       id: "tdtVec",
      //       //图层类型
      //       type: "raster",
      //       //数据源
      //       source: "tdtVec",
      //       //图层最小缩放级数
      //       minzoom: 0,
      //       //图层最大缩放级数
      //       maxzoom: 20,
      //     },
      //     {
      //       id: "tdtCva",
      //       type: "raster",
      //       source: "tdtCva",
      //       minzoom: 0,
      //       maxzoom: 20,
      //     },
      //   ],
      // },
      center: [123.47044, 41.75994], // starting position
      // center: [103.97031759044847, 36.890102967848634], // starting position
      zoom: 13.9, // starting zoom
      pitch: 0,
      // bearing:98,
      antialias: true, //抗锯齿
      projection: "globe",
    });
    map = map1;
    console.log(map1,'pppp');
    initDraw()
    return map;
  }
  function initDraw() {
    console.log("画图");
    draw = new MapboxDraw({
      displayControlsDefault: true,
      controls: {
        polygon: true,
        line_string: true,
        point: true,
        trash: true,
      },
    });
    map.addControl(draw);
    map.on("draw.create", updateArea);
    map.on("draw.delete", updateArea);
    map.on("draw.update", updateArea);
  }

  function updateArea(e) {
    var data = draw.getAll();
    console.log(JSON.stringify(data));
    console.log(
      data.features[data.features.length - 1].geometry.coordinates[0][0]
    );
  }
  function mapOn() {
    map.on("load", () => {
      console.log("地图加载");
      initDraw();

      // this.addImage();
      // this.addSource();
      // this.addLayers();
    });
  }
  onMounted(() => {
    // initMap();
    // mapOn();
  });

  onUnmounted(() => {});  
  console.log('执行return');
  return { map, initMap};
}
